'use strict';
import React, {
    Component,
    PropTypes
} from 'react';
import ReactDOM, {
    render
} from 'react-dom';

import {
    connect
} from 'react-redux';

import {
    bindActionCreators
} from 'redux';

import {
    R_header
} from './common/index'

import {
    scanDevice
} from '../action/index'
import {
    Toast
} from '../Http'

import {
    HttpService
} from '../utils'
// import kaoqin24 from '../img/login/kaoqin24.png'
// import kaoqin1356 from '../img/login/kaoqin1356.png'
import imgSao from '../img/sao.png'
import imgTip from '../img/tip.png'

class AddDevice extends React.Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    constructor(props) {
        super(props);
        this.state = {
            val: '',
            bg: 'app-little-pink-radius-button'
        }
    }
    // componentWillMount() {
    //     //检查是否没有设备登录
    //     if (this.props.params.islogin == 'true' && !localStorage.userphone) {
    //         Toast.toast('未获取到手机号，重新登录');
    //         this.context.router.push('/')
    //     }
    // }

    change(e) {
        let val = e.target.value;
        this.setState({
            val: val,
            bg: 'app-pink-radius-button'
        })
    }
    next(val, e) {
        e.preventDefault();
        if (!val) {
            Toast.toast('请输入设备号');
            return;
        }
        if (val.length < 10) {
            Toast.toast('设备号至少10位');
            return;
        } else if (val.length > 10 && val.length < 14) {
            Toast.toast('请输入正确的设备号');
            return;
        }
        this.props.scanDevice(this, val, this.props.params.status)
    }
    saoInput() {
        wx.scanQRCode({
            needResult: 1,
            scanType: [
                "qrCode", "barCode"
            ],
            success: (res) => {
                if (res.resultStr.indexOf('.html') > -1) {
                    Toast.toast('请扫描条码');
                    return;
                } else if (!isNaN(res.resultStr)) {
                    this.refs.kaoqin.value = res.resultStr
                    this.setState({
                        val: res.resultStr,
                        bg: 'app-pink-radius-button'
                    })
                    return;
                } else if (!isNaN(res.resultStr.split(',')[1])) {
                    this.refs.kaoqin.value = res.resultStr.split(',')[1]
                    this.setState({
                        val: res.resultStr.split(',')[1],
                        bg: 'app-pink-radius-button'
                    })
                    return;
                }
                Toast.toast('未扫描到有效数据');
            }
        });
    }

    render() {
        const {
            bg
        } = this.state;
        const {
            type,
            status
        } = this.props.params;
        const intro = status ? ['更换', '绑定','添加'][status] :
            '添加';
        return (
            <div style={{
                background: '#eee',
                minHeight: '100%',
                paddingTop: '88px'
            }}>
                <R_header title={"输入" + intro + "的设备号"} left="1"/>
                <div className="container">
                    <form onSubmit={this.next.bind(this, this.state.val)} name="form">
                        <div className="col-xs-12 app-white-input margin-one">
                            <input type="number" placeholder='请输入设备IMEI号' style={{
                                width: '100%',
                                paddingRight: '4rem'
                            }} onChange={this.change.bind(this)} ref='kaoqin'/>
                            <img id='imgsao' src={imgSao} onClick={this.saoInput.bind(this)}/>
                        </div>

                        <label style={{
                            display: 'block'
                        }}>
                            <div className={"col-xs-12 text-center " + bg}>
                                激活设备
                            </div>
                            <button type="submit" style={{
                                display: 'none'
                            }}></button>
                        </label>
                    </form>

                </div>
                {status == '0'
                    ? <p className='devtips'>
                            <h5 className='tipname'><img src={imgTip}/>更换新设备须知</h5>
                            <ol className="tipcontent">
                                <li>1. 您将绑定新的设备IMEI号及设备手机号，更换后，原套餐有效期不变。</li>
                                <li>2. 考勤卡更换为智能学生的用户，请配合旧的考勤卡使用，请勿丢失。</li>
                                <li>3. 更换成功后，您需要重新登录才能正常使用，给您带来的不变请谅解</li>
                            </ol>
                        </p>
                    : <p className='devtips'>
                        <h5 className='tipname'><img src={imgTip}/>{intro}设备说明</h5>
                        <ol className="tipcontent">
                            <li>1. 智能学生证设备请输入前14位数字IMEI号码，最后一位为核验码。</li>
                            <li>2. 考勤卡设备请输入10位考勤卡号。</li>
                        </ol>
                    </p>
}

            </div>
        )
    }
}

const mapStateToProps = state => {
    return {};
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        scanDevice: scanDevice
    }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(AddDevice);
